<template>
  <div>
    <div class="sec3-main" style="margin-top: -10px">
      <div class="time-point" style="left: 1500px" :class="{donghua1: isScroll}">
        <div class="num">1</div>
        <!-- <img :src="timeDatao.image" alt=""> -->
        <img src="@/assets/home/s3-5.png" alt="">
        <div class="txt">
          <h2>{{timeLineData[0].title}}{{homeText[3]}}</h2>
          <span>{{timeLineData[0].content}}</span>
        </div>
      </div>
      <div class="time-point" style="left: 1500px" :class="{donghua2: isScroll}">
        <div class="num" style="left: 85px">3</div>
        <img src="@/assets/home/s3-4.png" alt="" style="left: 60px">
        <div class="txt" style="left: 180px">
          <h2>{{timeLineData[3].title}}{{homeText[3]}}</h2>
          <span>{{timeLineData[3].content}}</span>
        </div>
      </div>
      <div class="time-point" style="left: 1500px" :class="{donghua3: isScroll}">
        <div class="num" style="left: 140px">5</div>
        <img src="@/assets/home/s3-2.png" alt="" style="left: 115px">
        <div class="txt" style="left: 230px">
          <h2>{{timeLineData[5].title}}{{homeText[3]}}</h2>
          <span>{{timeLineData[5].content}}</span>
        </div>
      </div>
      <div class="time-point odd" style="left: 1500px" :class="{donghua4: isScroll}">
        <div class="num" style="left: 43px">2</div>
        <!-- <img :src="timeDatat.image" alt="" style="top: -106px;left: 16px"> -->
        <img src="@/assets/home/s3-1.png" alt="" style="top: -106px;left: 16px">
        <div class="txt" style="top: -87px;left: 133px">
          <h2>{{timeLineData[2].title}}{{homeText[3]}}</h2>
          <span>{{timeLineData[2].content}}</span>
        </div>
      </div>
      <div class="time-point odd" style="left: 1500px" :class="{donghua5: isScroll}">
        <div class="num" style="left: 112px">4</div>
        <img src="@/assets/home/s3-3.png" alt="" style="top: -106px;left: 85px">
        <div class="txt" style="top: -103px;left: 200px">
          <h2>{{timeLineData[4].title}}{{homeText[3]}}</h2>
          <span>{{timeLineData[4].content}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'time_line',
  data () {
    return {
    }
  },
  props: {
    isScroll: {
      type: Boolean
    },
    timeDatao: {
      type: Object
    },
    timeDatat: {
      type: Object
    },
    timeLineData: {
      type: Array
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'homeText': 'homeText'
    })
  },
  created () {
    console.log(11)
    console.log(this.timeDatao)
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.donghua1 {
  left: 0px!important;
  transition: all 1s .3s
}
.donghua2 {
  left: 408px!important;
  transition: all 1s .9s
}
.donghua3 {
  left: 815px!important;
  transition: all 1s 1.5s
}
.donghua4 {
  left: 215px!important;
  transition: all 1s .6s
}
.donghua5 {
  left: 615px!important;
  transition: all 1s 1.2s
}
.sec3-main {
  width: 1200px;
  margin: 0 auto;
  height: 585px;
  position: relative;
  overflow: hidden;
  .time-point {
    position: absolute;
    top: 33%;
    transform: translateY(-56%);
    width: 385px;
    div.num {
      width: 42px;
      height: 42px;
      background-color: #ffffff;
      border: solid 2px #2b64d5;
      border-radius: 50%;
      text-align: center;
      line-height: 42px;
      color: #2b64d5;
      font-size: 24px;
      position: absolute;
      top: 65px;
      left: 26px;
      position: relative;
    }
    div.num:after {
      content: "";
      width: 2px;
      height: 65px;
      background-color: #2b64d5;
      position: absolute;
      top: 42px;
      left: 21px
    }
    img {
      position: absolute;
      top: 173px
    }
    div.txt {
      position: absolute;
      top: 197px;
      left: 113px;
      h2 {
        font-size: 24px;
        letter-spacing: 2px;
        color: #2859bb;
        margin-bottom: 8px
      }
      span {
        font-size: 16px;
        letter-spacing: 1px;
        color: #333333;
      }
    }
  }
  .odd {
    div.num:after {
      content: "";
      width: 2px;
      height: 65px;
      background-color: #2b64d5;
      position: absolute;
      top: -67px;
      left: 21px
    }
  }
}
</style>
